<template>
	<view class="db-task-box">
		<!-- 顶部展示 -->
		<top-task-num ref="refreshTaskNum"></top-task-num>

		<!-- body -->
		<view class="task-body">
			<!-- 筛选操作区域 -->
			<view class="select-edit">
				<view @click="handleChangeIsAllSelect" class="edit-btn">
					<text class="btn">全选</text>
				</view>
				<!-- <view class="edit-btn-import" @tap="handleOpenImportRelation">
					<text class="btn-import">导入客户经理绑定关系</text>
				</view> -->
				<!-- 条件筛选 -->
				<view class="edit-screen" @tap="handleOpenTaskSelect">
					<image src="../../static/newImage/vector.png"></image>
				</view>
			</view>

			<!-- body -->
			<!-- <unc-checkbox v-model="select" :checked="false" style="transform:scale(0.7)" color='#C9000F'>

			</unc-checkbox> -->

			<checkbox-group @change="checkboxChange">
				<view class="task-body-item" v-for="(wxTaskItem, wxTaskIndex) in wxTaskTableData" :key="wxTaskIndex">
					<!-- 任务标题 -->
					<view class="body-item-top">
						<view class="item-top-left">
							<!-- 多选 -->
							<label class="left-check-title">
								<view class="left-image">
									<checkbox :checked="taskIdList.includes(wxTaskItem.id)" style="transform:scale(0.7)"
										color='#C9000F' :value="wxTaskItem.id" />
									<!-- <unc-checkbox @change="checkboxChange" v-model="wxTaskItem.id" :checked="taskIdList.includes(wxTaskItem.id)" color='#C9000F'>

									</unc-checkbox> -->
								</view>
								<!-- 任务名称 -->
								<h3 class="item-title">
									{{ wxTaskItem.subjectName === "" ? '暂无任务名称' : wxTaskItem.subjectName }}
								</h3>
							</label>
							<!-- <text class="item-text-block">{{ wxTaskItem.source }}</text> -->
							<text class="item-text-block" v-if="wxTaskItem.source === '平台'">平台任务</text>
							<text class="item-text-block" v-else-if="wxTaskItem.source === 'GRT'">GRT任务</text>
							<text class="item-text-block" v-else-if="wxTaskItem.source === '自定义'">自定义任务</text>
						</view>
						<view class="item-top-right">
							<text>{{ wxTaskItem.type }}</text>
						</view>
					</view>

					<!-- 任务显示 -->
					<view class="body-item-center" v-for="(infoItem, infoIndex) in wxTaskTableDataInfo[wxTaskIndex]"
						:key="infoIndex">
						<text class="center-text">{{ infoItem.name }}</text>
						<text class="center-num">
							{{ infoItem.value }}
							<text @tap="handleCopy(infoItem.value)" class="center-copy"
								v-if="infoItem.name === '车架号'">复制</text>
						</text>
					</view>

					<!-- 明细 -->
					<view @tap="handleGoPath(wxTaskItem)" class="body-item-bottom">
						<view class="body-detail">明细</view>
					</view>
				</view>
			</checkbox-group>


			<!-- 派发任务 -->
			<view class="handOut-btn">
				<button @click="handleDistributeTask" v-show="wxTaskTableData.length > 0" size="default" type="default"
					class="btn">
					派发任务
				</button>
			</view>

			<view class="top-back" @click="topBack" v-if="isShow">
				<image src="../../static/newImage/goTop.png"></image>
			</view>

		</view>

		<!-- 筛选条件弹窗区域 -->
		<uni-popup :safe-area="true" ref="popup" background-color="#fff">
			<!-- 弹窗内容区域 -->
			<view class="popup-content">
				<view class="popup-top">
					<view></view> <!-- 占位符 -->
					<text class="popup-title">
						条件筛选
					</text>
					<van-icon @tap="handleClosePopup" name="cross" style="color: #000;" />
				</view>

				<view class="popup-conter">
					<!-- 选择门店 -->
					<!-- <view class="items">
						<text class="items-title">选择门店</text>
						<view class="task-select">
							<picker mode="selector" :range="selectorArray" :value="selectedIndex"
								@change="onPickerChange">
								<view class="picker-text">{{ selectorArray[selectedIndex] }}</view>
							</picker>
						</view>
					</view> -->

					<!-- 任务类型 -->
					<view class="items">
						<text class="items-title">任务类型</text>
						<view class="task-select">
							<picker mode="selector" :range="taskTypeData" :value="actTaskIndex"
								@change="handleActTaskChange">
								<view class="picker-text">{{ taskTypeData[actTaskIndex] }}</view>
							</picker>
						</view>
					</view>

					<!-- 任务名称 -->
					<view class="items">
						<text class="items-title">任务名称</text>
						<view class="task-select">
							<input class="search-input" type="text" v-model="taskName" placeholder="请输入任务名称"></input>
						</view>
					</view>
					<!-- 车架号 -->
					<view class="items">
						<text class="items-title">车架号</text>
						<view class="task-select">
							<input class="search-input" type="text" v-model="wx_vin" placeholder="车架号填写"></input>
						</view>
					</view>
					<!-- 维系人员 -->
					<view class="items">
						<text class="items-title">维系人员</text>
						<view class="task-select">
							<picker mode="selector" :range="userAllList" :value="personIndex"
								@change="handlePersonChange">
								<view class="picker-text">{{ userAllList[personIndex] }}</view>
							</picker>
						</view>
					</view>

					<!-- 车牌号 -->
					<view class="items">
						<text class="items-title">车牌号</text>
						<view class="task-select">
							<input class="search-input" type="text" v-model="wx_lsn" placeholder="车牌号填写"></input>
						</view>
					</view>

					<!-- 任务时间 -->
					<view class="items">
						<text class="items-title">任务时间</text>
						<view class="task-select">
							<picker mode="date" :value="date1" @change="handleDateChange1">
								<view class="picker-text">{{ date1 }}</view>
							</picker>
							<text class="select-text">至</text>
							<picker mode="date" :value="date2" @change="handleDateChange2">
								<view class="picker-text">{{ date2 }}</view>
							</picker>
						</view>
					</view>

				</view>

				<!-- 按钮 -->
				<view class="select-btn">
					<button @click="handleSelectBtn" size="default" type="default" class="btn">
						查询
					</button>
				</view>
			</view>
		</uni-popup>

		<!-- 派发任务弹窗 -->
		<uni-popup :safe-area="true" ref="popupHair" background-color="#fff">
			<view class="popup-content">
				<view class="popup-top">
					<view></view> <!-- 占位符 -->
					<text class="popup-title">
						请选择派发对象
					</text>
					<van-icon @tap="handleClosePopup" name="cross" style="color: #000;" />
				</view>

				<view class="popup-conter">
					<!-- 请选择派发对象 -->
					<view class="items">
						<text class="items-title">派发给：</text>
						<view class="task-select">
							<picker mode="selector" :range="userAllList" :value="hairIndex"
								@change="handleChangePeople">
								<view class="picker-text">{{ userAllList[hairIndex] }}</view>
							</picker>
						</view>
					</view>
				</view>

				<!-- 按钮 -->
				<view class="select-btn">
					<button @click="sendTaskSubmit" size="default" type="default" class="btn">
						确定派发
					</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import topTaskNum from "@/packageE/components/topTaskNum.vue"
	import apiRqs from '@/api/api-request.js'
	import utils from '@/utils/uitils.js'
	export default {
		components: {
			"top-task-num": topTaskNum,
		},

		data() {
			return {
				taskTypeData: [], // 任务类型数据
				activityTaskList: [], // 任务类型-可选项
				activityTaskType: '', // 任务类型-选中
				taskName: '', // 任务名称
				wx_vin: '', // 车架号
				wxPersonOptions: [], // 维系人员列表
				wx_person: '', // 维系人员-选中
				wx_lsn: '', // 车牌号

				wxTaskTableData: [], // 维系任务列表
				wxTaskTableDataInfo: [], // 维系任务(表单)信息
				index: 0,

				selectedIndex: 0, // 默认选中的索引
				actTaskIndex: 0, // 任务类型-默认选中索引
				personIndex: 0, // 维系人员-默认选中索引
				hairIndex: 0, // 派发任务索引
				date1: '',
				date2: '',

				wxTaskTableLoading: false, // 骨架屏加载状态
				// 常规招揽分页显示
				wx_task_paged: {
					pageSize: 5,
					pageIndex: 1,
					orderBy: "",
				},
				total: '0', // 分页总数
				taskIdList: [], // 存储派发任务id
				allSelect: false,
				curShopId: '', // 门店id
				userAllList: [], // 门店所有用户列表
				send_task_person: '', // 选择派发的人员
				
				isShow: false, // 是否显示返回顶部按钮
				lastScrollTop: 0,
			}
		},
		
		onLoad() {
			// 从详情页返回该页面的获取数据
			uni.$on('refreshData',() => {
				this.$refs.refreshTaskNum.refresh();
			})
		},
		
		created() {
			// this.getShopDepartmentList()
			// this.getWxTaskList() // 初始化获取数据
			// this.getActivityTaskType() // 获取任务类型
		},
		mounted() {
			this.date1 = '2024-09-18' ||  this.currentDate
			this.date2 = this.currentDate
			
			this.taskTypeData = utils.taskTypeData

			this.getShopDepartmentList() // 获取门店组织架构
			this.getWxTaskList() // 初始化获取数据
			// this.getActivityTaskType() // 获取任务类型
		},

		computed: {
			// 获取当前日期
			currentDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
			},
		},

		methods: {
			
			// 跳转任务明细
			handleGoPath(item) {
				console.log('items', item)
				let routerPath = '/packageE/maintenance-task/db-maintenance-task'
				// 保存当前页面跳转
				uni.navigateTo({
					url: "/packageE/components/strategy-detail-v3?vin=" + 
						item.vin + "&taskId=" + item.id + "&groupId=" + item.groupId +
							"&routerPath=" + routerPath,
				});
			},

			// 获取门店组织架构
			async getShopDepartmentList() {
				try {
					const shopRes = await apiRqs.getShopDepartmentList()
					console.log("门店部门列表返回的数据", shopRes);
					const curShopId = shopRes.data[0].id;
					this.curShopId = curShopId

					this.getUserList()
				} catch (e) {
					console.log("门店部门列表返回的数据失败", e);
				}
			},
			// 获取获取门店所有用户
			async getUserList() {
				try {
					let reqData = {
						pagedDto: {
							pageSize: 9999,
							pageIndex: 1,
							orderBy: "",
						},
						depId: this.curShopId, // 门店id
					}
					const userRes = await apiRqs.getUserList(reqData)
					console.log('获取获取门店所有用户返回的数据', userRes)

					this.userAllList = userRes.data.data.map(item => item.realName)
					this.userAllList.unshift('全部')
					console.log('门店所有用户列表', this.userAllList)
				} catch (e) {
					console.log('获取获取门店所有用户返回的数据失败', e)
				}
			},


			// 获取维系任务清单接口所需要的参数
			async getWxTaskList(selectType = false) {
				// this.date1 = this.currentDate
				// this.date2 = this.currentDate
				let reqData = {
					dateRange: {
						beginDate: this.date1,
						endDate: this.date2,
					},
					paged: this.wx_task_paged, // 分页信息
					personLiable: this.wx_person, // 维系人员
					finish: 0,
					vin: this.wx_vin, // 车架号
					node: [-13, -7], // 节点
					way: "电话",
					type: "",
					selectType: this.activityTaskType, // 任务类型
					subjectName: this.taskName, // 任务名称
					CustomType: "",
					lsn: this.wx_lsn, // 车牌号
				};
				if (this.activityTaskType === "全部") {
					reqData.selectType = "";
				}
				if (this.wx_person == "全部") {
					reqData.personLiable = "";
				} else {
					reqData.personLiable = this.wx_person;
				}
				//  if (this.userInfo.shopId == "CS001") {
				// reqData.shopId = this.shopId;
				//  }
				if (!selectType) {
					this.wx_task_paged.pageIndex = 1
				}
				await this.wxTaskRqs(reqData, selectType);
			},

			/**
			 * @function 获取维系任务清单-接口
			 * @param {object} reqData请求参数
			 * @param {boolean} selectType 判断是按钮还是滚动触底 false 为默认 true只表示触底分页
			 */
			async wxTaskRqs(reqData, selectType = false) {
				console.log("获取维系任务清单请求参数", reqData);
				this.wxTaskTableLoading = true // 开启骨架屏
				await apiRqs.getDingbaoWorkList(reqData)
					.then((taskRes) => {
						console.log("维系清单返回的data----------------------", taskRes);
						let data = JSON.parse(JSON.stringify(taskRes.data.data));
						console.log("深拷贝后的data", data)
						this.total = taskRes.data.totalRecords; // 总数
						// this.$store.dispatch("saveMaintainTaskStatics", taskRes.totalRecords);
						for (let i = 0; i < data.length; i++) {
							if (data[i].node > 0 || data[i].node < 0) {
								data[i].node = "N" + data[i].node;
							} else if (data[i].node == 0) {
								data[i].node = "N";
							}
							console.log('data修改完节点后的值', data)
							console.log('utils.getDay(0)', utils.getDay())
							console.log('data[i].taskDate.split', data[i].taskDate.split(" ")[0])

							const dayBetween = utils.getDaysBetween(utils.getDay(), data[i].taskDate.split(" ")[0])
							console.log('dayBetween', dayBetween)
							if (dayBetween > 0) {
								data[i].isOverTime = true;
							} else {
								data[i].isOverTime = false;
							}

							data[i].taskDate = data[i].taskDate ? data[i].taskDate.split(" ")[0] : "";
							data[i].sendDate = data[i].sendDate ? data[i].sendDate.split(" ")[0] : "";
							data[i].guessDate = data[i].guessDate ? data[i].guessDate.split(" ")[0] : "";
							data[i].expirationDate = data[i].expirationDate ? data[i].expirationDate.split(" ")[
								0] : "";
							data[i].beginKeepDate = data[i].beginKeepDate ? data[i].beginKeepDate.split(" ")[0] :
								"";
						}
						console.log("foramted data", data);

						// 处理数据中存在null的情况
						data = data.map(item => {
							for (let key in item) {
								if (item[key] === null) {
									item[key] = '';
								}
							}
							return {
								...item,
								isSelect: false
							};
						});
						console.log('去除掉data数组中的null后', data)

						if (selectType) {
							this.wxTaskTableData = this.wxTaskTableData.concat(data);
						} else {
							this.wxTaskTableData = data
						}
						console.log('data数据加载', this.wxTaskTableData)

						this.wxTaskTableData.forEach((item, index) => {
							this.$set(this.wxTaskTableData[index], 'isSelect', false);
						})
						console.log('set后', this.wxTaskTableData)

						/** 任务状态 */
						let taskStatus = '';
						let maker = '';
						let isOverTime = '';
						let tableList = []
						// 任务显示
						for (let i = 0; i < this.wxTaskTableData.length; i++) {
							taskStatus = '';
							maker = this.wxTaskTableData[i].maker;
							isOverTime = this.wxTaskTableData[i].isOverTime;
							if (maker === '自定义' || maker === '自定义继续') {
								taskStatus = '继续任务';
							}
							if (isOverTime) {
								taskStatus = '超时任务';
							}
							let objArray = [
								// {
								// 	name: '任务来源',
								// 	value: this.wxTaskTableData[i].source
								// },
								{
									name: '任务状态',
									value: taskStatus
								},
								{
									name: '任务类型',
									value: this.wxTaskTableData[i].type
								},
								{
									name: '客户类型',
									value: this.wxTaskTableData[i].is_Possession
								},
								{
									name: '客户姓名',
									value: this.wxTaskTableData[i].name
								},
								{
									name: '联系电话',
									value: this.wxTaskTableData[i].tel
								},
								{
									name: '车架号',
									value: this.wxTaskTableData[i].vin
								},
								{
									name: '车牌号',
									value: this.wxTaskTableData[i].lsn
								},
								{
									name: '担当人',
									value: this.wxTaskTableData[i].responsible
								},
								{
									name: '计划招揽时间',
									value: this.wxTaskTableData[i].taskDate
								},
								{
									name: '维系人员',
									value: this.wxTaskTableData[i].personLiable
								}
							]
							tableList.push(objArray)
						}
						this.wxTaskTableDataInfo = tableList
						console.log('维系任务列表数据(不包含任务名称)', this.wxTaskTableDataInfo)
						this.wxTaskTableLoading = false
					})
					.catch((err) => {
						console.log('获取维系任务失败')
						this.wxTaskTableLoading = false
					})
			},


			/**
			 * @function 派发任务-全选
			 */
			handleChangeIsAllSelect() {
				if (this.wxTaskTableData.length === this.taskIdList.length) {
					this.taskIdList = []
					console.log('taskIdList取消选中', this.taskIdList)
				} else {
					this.taskIdList = []
					this.wxTaskTableData.forEach(item => {
						this.taskIdList.push(item.id)
					})
					console.log('taskIdList选中', this.taskIdList)
				}
			},
			/**
			 * @function 监听维系列表选中的项
			 * @param {array} 选中的taskid
			 */
			checkboxChange(event) {
				console.log('监听到的值', event.detail.value)
				this.taskIdList = event.detail.value
			},

			/**
			 * @function 派发任务 
			 */
			handleDistributeTask() {
				if (this.taskIdList.length < 1 || this.taskIdList === undefined || !this.taskIdList) {
					uni.showToast({
						title: '请勾选需要派发的任务',
						icon: 'none',
						duration: 2000,
					})
					return
				}

				this.$refs.popupHair.open('bottom')
			},
			// 监听任务派发选中
			handleChangePeople(event) {
				this.hairIndex = event.detail.value
				this.send_task_person = this.userAllList[event.detail.value]
			},
			// 确认派发
			async sendTaskSubmit() {
				try {
					uni.showLoading({
						title: '派发中...'
					})
					let reqData = {
						toUser: this.send_task_person,
						taskId: this.taskIdList,
					};
					console.log('派发前的参数', reqData)
					const hairRes = await apiRqs.handleTaskSend(reqData)
					console.log('派发结果', hairRes)
					if (hairRes.data === '') {
						uni.showToast({
							title: '派发成功',
							icon: 'success',
							duration: 1000
						})
						this.getWxTaskList() // 重新获取维系任务列表
						uni.hideLoading(); // 关闭loading
						this.$refs.popupHair.close() // 关闭弹窗
					}
					this.taskIdList = []
				} catch (e) {
					uni.hideLoading();
					console.log('任务派发失败', e)
				}
			},


			/** 
			 * @function 客户经理绑定关系弹窗 
			 */
			handleOpenImportRelation() {
				this.$refs.relationPopup.open('center')
			},
			close() {
				this.$refs.relationPopup.close()
			},


			/**
			 * @function 筛选条件详情弹出,从底部弹出
			 */
			handleOpenTaskSelect() {
				this.$refs.popup.open('bottom')
			},
			/**
			 * @function 关闭popup弹窗
			 */
			handleClosePopup() {
				this.$refs.popup.close()
			},
			onPickerChange(event) {
				this.selectedIndex = event.detail.value;
				console.log('选择的值为：', this.selectorArray[this.selectedIndex]);
			},


			/**
			 * @function 获取任务类型
			 */
			// async getActivityTaskType() {
			// 	try {
			// 		let reqData = {
			// 			dateRange: {
			// 				beginDate: this.date1,
			// 				endDate: this.date2,
			// 			},
			// 		};
			// 		const res = await apiRqs.getSourceService(
			// 			reqData
			// 		);
			// 		console.log("任务类型-结果", res.data.type);
			// 		this.activityTaskList = res.data.type;
			// 		this.activityTaskList.unshift('全部')

			// 	} catch (error) {
			// 		console.log('任务类型获取失败', error);
			// 	}
			// },

			// 监听任务类型选择
			handleActTaskChange(event) {
				this.actTaskIndex = event.detail.value
				this.activityTaskType = this.taskTypeData[this.actTaskIndex]
				console.log('任务类型选择', this.activityTaskType)
			},

			// 监听维系人员选择
			handlePersonChange(event) {
				this.personIndex = event.detail.value
				this.wx_person = this.userAllList[this.personIndex]
				console.log('维系人员选择', this.wx_person)
			},

			// 监听日期选择
			handleDateChange1(event) {
				this.date1 = event.detail.value
				console.log('选择的日期', this.date1)
			},
			handleDateChange2(event) {
				this.date2 = event.detail.value
				console.log('选择的日期', this.date2)
			},

			/**
			 * @function 查询按钮
			 */
			async handleSelectBtn() {
				console.log('查询按钮')

				// if(this.wxTaskTableData.length > 0) {
				// 	this.wxTaskTableData = []
				// }

				uni.showLoading({
					title: '查询中...',
				})
				await this.getWxTaskList()
				uni.hideLoading()

				this.$refs.popup.close()
			},

			// 复制车架号
			handleCopy(value) {
				console.log('被复制的车架号', value)
				uni.setClipboardData({
					data: value,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: "复制成功",
								});
							},
							complete: function(res) {
								console.log('复制车架号res', res)
							}
						});
					},
					complete: function(res) {
						console.log('复制车架号res1023', res)
					}
				});
			},
			
			topBack(){
				uni.pageScrollTo({
					scrollTop:0,   // 滚动到页面的目标位置  这个是滚动到顶部, 0 
					duration:500  // 滚动动画的时长
				})
			},
		},

		onPageScroll(e) {
			// console.log('e:',e)
			if (e.scrollTop >= 700 && e.scrollTop < this.lastScrollTop) {
				// 显示
				this.isShow = true
			} else {
				// 隐藏
				this.isShow = false
			}
			
			this.lastScrollTop = e.scrollTop
		},

		onReachBottom() { //触底事件
			if (this.wx_task_paged.pageIndex * this.wx_task_paged.pageSize >= this.total) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none',
					duration: 1000
				});
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			} else {
				if (this.wx_task_paged.pageIndex <= this.wx_task_paged.pageIndex - 1) {
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				} else {
					uni.showLoading({
						title: '加载中'
					});
					this.wx_task_paged.pageIndex++
					this.getWxTaskList(true)
				}
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			}
		},

	}
</script>

<style lang="less" scoped>
	.db-task-box {
		padding: 12px;
		padding-bottom: var(--status-bar-height); // 距离底部安全区域
		background-color: #F6F6F6;

		.task-body {
			// margin-top: 12px;
			margin-bottom: 150rpx;

			.select-edit {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 30px;
				position: sticky; // 固定显示
				top: 0;
				background-color: #F6F6F6;
				z-index: 10;
				padding: 24rpx 0;

				.edit-btn,
				.edit-btn-import{
					margin-right: 8px;
					width: 40px;
					// height: 30px;
					text-align: center;
					line-height: 30px;
					border-radius: 8px;
					background-color: #C9000F;
					color: #fff;
					font-size: 12px;
					font-weight: 400;
				}

				.edit-btn-import {
					width: 256px;
					background-color: #919399;
				}

				.edit-screen {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40px;
					height: 100%;
					// padding: 12px 8px;
					border-radius: 8px;
					background-color: #fff;

					image {
						width: 15px;
						height: 15px;
					}
				}

			}

			.task-body-item {
				display: flex;
				flex-direction: column;
				flex: 1;
				margin-top: 12px;
				padding: 12px;
				border-radius: 8px;
				background-color: #fff;
				&:first-child{
					margin-top: 0;
				}

				.body-item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					padding-bottom: 12px;
					border-bottom: 1px solid #E2E2E2;

					.item-top-left {
						display: flex;
						align-items: center;

						.left-check-title {
							display: flex;
							align-items: center;
						}

						// .left-image {
						// 	width: 16px;
						// 	height: 16px;
						// 	image {
						// 		width: 100%;
						// 		height: 100%;
						// 	}
						// }

						.item-title {
							margin: 0 5px;
							font-size: 14px;
							font-weight: 500;
							color: #333333;
						}

						.item-text-block {
							margin-top: 2px;
							padding: 0 5px;
							border-radius: 2px;
							background-color: #CECECE;
							font-size: 10px;
							font-weight: 400;
							color: #fff;
						}
					}

					.item-top-right {
						font-size: 14px;
						font-weight: 400;
						color: #CECECE;
					}
				}

				.body-item-center {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 12px;
					font-size: 12px;
					color: #999999;

					.center-num {
						color: #333333;

						.center-copy {
							margin-left: 5px;
							color: #C9000F;
						}
					}
				}

				.body-item-bottom {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					margin-top: 12px;
					font-size: 12px;
					font-weight: 500;
					color: #333333;

					.body-detail,
					.body-import {
						width: 70px;
						padding: 5px 5px;
						border-radius: 32px;
						border: 1px solid #333333;
						text-align: center;
					}

					.body-import {
						margin-left: 10px;
						border: 1px solid #FFAA00;
						color: #FFAA00;
					}

				}

				&:last-child {
					margin-bottom: 0;
				}
			}

			// 底部派发任务
			.handOut-btn {
				position: fixed;
				left: 0;
				bottom: constant(safe-area-inset-bottom);
				bottom: env(safe-area-inset-bottom);
				margin: 0 24rpx 24rpx 24rpx;
				width: calc(100% - 48rpx);

				.btn {
					background-color: #C9000F;
					color: #fff;
					font-size: 32rpx;
					font-weight: 600;
				}
			}
			
			.top-back {
				position: fixed;
				right: 50rpx;
				bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
				bottom: calc(env(safe-area-inset-bottom) + 150rpx);
				display: flex;
				align-items: center;
				border-radius: 50rpx;
				width: 86rpx;
				height: 86rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}

		}


		// 弹窗区域
		.popup-content {
			padding: 20px 12px;

			.popup-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 12px;

				.popup-title {
					font-size: 16px;
					color: #333333;
					font-weight: 600;
				}
			}

			.popup-conter {
				.items {
					margin-bottom: 16px;

					.items-title {
						font-size: 16px;
						font-weight: 500;
					}

					.task-select {
						display: flex;
						align-items: center;
						justify-content: center;
						flex: 1;
						margin-top: 10px;
						padding: 8px 0;
						border-radius: 8px;
						text-align: center;
						background-color: #f2f2f2;

						.picker-text {
							font-size: 14px;
							font-weight: 400;
							color: #333333;
						}

						.search-input {
							font-size: 14px;
						}

						.search-input::placeholder {
							font-size: 14px;
						}

						.select-text {
							margin: 0 10px;
							color: #999999;
						}

					}
				}
			}

			.select-btn {
				margin-top: 30px;

				.btn {
					flex: 1;
					background-color: #C9000F;
					color: #fff;
					border-radius: 8px;
				}
			}

		}

	}
</style>